"use client"

import React, { useEffect } from "react";
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import { useRouter } from "next/navigation";

interface IProps {
  params?: string
  children: React.ReactNode;

}


const SystemLayout: React.FC<IProps> = (props) => {
  const { children } = props;
  const router = useRouter();

  const funcTags = [{ name: '情绪分类', key: 'classification' }, { name: '数据处理', key: 'data-preprocessing' },
  { name: '预训练模型', key: 'pre-training' }]

  useEffect(() => {
    funcTags.forEach((item) => {
      router.prefetch(`/system/${item.name}`)
    })

  }, [])

  function goFunc(key: string) {
    router.push(`/system/${key}`)
  }

  return (
    <div className="flex w-full h-full">
      <div className="w-60 h-full">
        <ScrollArea className="h-full w-48 rounded-md border m-5">
          <div className="p-4">
            <h4 className="mb-4 text-sm font-medium leading-none">功能</h4>
            {funcTags.map((tag) => (
              <div key={tag.name} className="hover:bg-slate-50 transition duration-300">
                <Separator className="my-2" />
                <div className="h-full leading-normal text-xl cursor-pointer transition duration-500" onClick={() => {

                  goFunc(tag.key)
                }} >
                  {tag.name}
                </div>
                <Separator className="my-2" />
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
      <div className="m-5 w-full h-full">
        {children}
      </div>
    </div>
  )
}

export default SystemLayout;